<template>
    <el-aside width="200px">
        <el-menu mode="vertical" router :default-active="'Home'">
            <el-menu-item index="Home">首页</el-menu-item>
            <el-menu-item index="Video">视频</el-menu-item>
            <el-menu-item index="Joke">随机笑话</el-menu-item>
            <el-menu-item index="Calculator">计算器</el-menu-item>
            <el-sub-menu index="Games">
                <template #title>小游戏</template>
                <el-menu-item index="TicTacToe">井字棋</el-menu-item>
                <el-menu-item index="Snake">贪吃蛇</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="PhotoWall">照片墙</el-menu-item>
            <el-menu-item index="Profile">我的</el-menu-item>
        </el-menu>
    </el-aside>
</template>

<script setup>
// 侧边菜单逻辑
</script>

<style lang="scss" scoped>
.el-aside {
    background-color: var(--background-color); // 使用系统主题背景色
    transition: background-color 0.3s ease; // 添加过渡效果，使背景色变化更平滑

    .el-menu {
        background-color: transparent; // 菜单背景透明，继承侧边栏背景色
        border-right: none; // 移除右侧边框

        .el-menu-item,
        .el-sub-menu__title {
            color: var(--text-color); // 使用系统主题文字颜色
            &:hover {
                background-color: rgba(0, 0, 0, 0.1); // 鼠标悬停时的背景色
            }
        }

        .el-sub-menu .el-menu {
            background-color: var(--background-color); 
            .el-menu-item {
                color: var(--text-color); 
                &:hover {
                    background-color: rgba(0, 0, 0, 0.1); 
                }
                &.is-active {
                    background-color: #007aff; 
                    color: white; 
                }
            }
        }

        .el-menu-item.is-active {
            background-color: #007aff; // 激活菜单项的背景色
            color: white; // 激活菜单项的文字颜色
        }
    }
}
</style>